<!--
说明：商品表表单
作者：292303959@qq.com
日期：2018-10-17 10:5:20
版本：1.0.0
-->
<template>
  <el-dialog :title="title"
             append-to-body
             visible
             lock-scroll
             :before-close="handleClose"
             :close-on-click-modal="false"
             width="900px">
    <el-form ref="form"
             :model="form"
             :label-width="ui.formLabelWidth"
             :element-loading-text="ui.loadingText"
             v-loading="ui.busying">

      <el-row type="flex">
        <el-col :span="20">
          <mk-form-item label="商品名称"
                        prop="pdname"
                        :mk-le-length="100"
                        required>
            <el-input v-model="form.pdname"
                      :disabled="isAudit"></el-input>
          </mk-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="20">
          <mk-form-item label="商品简介"
                        prop="pddesc"
                        :mk-le-length="200"
                        required>
            <el-input v-model="form.pddesc"
                      :disabled="isAudit"></el-input>
          </mk-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="10">
          <mk-form-item label="所属系列"
                        prop="brid"
                        :mk-le-length="100"
                        mk-trigger="change"
                        required>
            <el-select v-model="form.brid"
                       :disabled="isAudit">
              <el-option v-for="(item,index) in brList"
                         :key="index"
                         :value="item.brid"
                         :label="item.brname"></el-option>
            </el-select>
          </mk-form-item>
        </el-col>
        <el-col :span="10">
          <mk-form-item label="商品单位"
                        prop="pdunit"
                        :mk-le-length="20"
                        required>
            <el-select v-model="form.pdunit"
                       :disabled="isAudit">
              <el-option v-for="(item,index) in pdUnitList"
                         :key="index"
                         :value="item"
                         :label="item"></el-option>
            </el-select>
          </mk-form-item>
        </el-col>

      </el-row>
      <el-row type="flex">
        <el-col :span="20">
          <mk-form-item label="商品功效"
                        prop="pdeffect"
                        :mk-le-length="1000"
                        required>
            <el-input v-model="form.pdeffect"
                      :disabled="isAudit"></el-input>
          </mk-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="20">
          <mk-form-item label="适用人群"
                        prop="pdcrowd"
                        :mk-le-length="1000"
                        required>
            <el-input v-model="form.pdcrowd"
                      :disabled="isAudit"></el-input>
          </mk-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="商品主图"
                        prop="img"
                        required>
            <mk-upload v-model="form.img"
                       :limit="1"
                       type="IMAGE"
                       :choose="false"
                       :width="99"
                       :height="99"
                       list-type="card"></mk-upload>
          </mk-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <mk-form-item label="商品轮播图1"
                        prop="img1">
            <mk-upload v-model="form.img1"
                       :limit="1"
                       type="IMAGE"
                       :choose="false"
                       :width="99"
                       :height="99"
                       list-type="card"></mk-upload>
          </mk-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="商品轮播图2"
                        prop="img2">
            <mk-upload v-model="form.img2"
                       :limit="1"
                       type="IMAGE"
                       :choose="false"
                       :width="99"
                       :height="99"
                       list-type="card"></mk-upload>
          </mk-form-item>
        </el-col>
        <el-col :span="24">
          <mk-form-item label="商品轮播图3"
                        prop="img3">
            <mk-upload v-model="form.img3"
                       :limit="1"
                       type="IMAGE"
                       :choose="false"
                       :width="99"
                       :height="99"
                       list-type="card"></mk-upload>
          </mk-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="商品轮播图4"
                        prop="img4">
            <mk-upload v-model="form.img4"
                       :limit="1"
                       type="IMAGE"
                       :choose="false"
                       :width="99"
                       :height="99"
                       list-type="card"></mk-upload>
          </mk-form-item>
        </el-col>
        <el-col :span="24">
          <mk-form-item label="商品轮播图5"
                        prop="img5">
            <mk-upload v-model="form.img5"
                       :limit="1"
                       type="IMAGE"
                       :choose="false"
                       :width="99"
                       :height="99"
                       list-type="card"></mk-upload>
          </mk-form-item>
        </el-col> -->
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="商品详情"
                        prop="pddetail"
                        required>
            <mk-upload v-model="form.pddetail"
                       :limit="10"
                       multiple
                       type="IMAGE"
                       :choose="false"
                       :width="99"
                       :height="99"
                       list-type="card"></mk-upload>
          </mk-form-item>
        </el-col>
      </el-row>
      <mk-card>
        <div slot="header"
             class="clearfix">
          <span>规格信息</span>
          <el-button style=" padding: 3px 0"
                     type="text"
                     @click="addSku"
                     v-if="!isAudit&&!isView">新增规格</el-button>
        </div>
        <div class="text item">
          </el-row>
          <el-row type="flex"
                  v-for="(obj,index) in form.skuList"
                  :key="index">
            <el-col :span=24>
              <mk-form-item label="规格名称"
                            :prop="'skuList['+index+'].psname'"
                            required>
                <el-input placeholder="规格名称"
                          v-model="obj.psname"
                          :disabled="isAudit"
                          size="small"></el-input>
              </mk-form-item>
            </el-col>
            <el-col :span=24>
              <mk-form-item label="价格"
                            :prop="'skuList['+index+'].psprice'"
                            :rules="[
                                  {required:true, message: '必须填写', trigger: 'blur'},
                                ]">
                <el-input placeholder="价格"
                          v-model="obj.psprice"
                          :disabled="isAudit"
                          size="small"></el-input>
              </mk-form-item>
            </el-col>
            <el-col :span=24>
              <mk-form-item label="是否展示"
                            :prop="'skuList['+index+'].psprice'">
                <el-switch v-model="obj.isshow"
                           active-value="1"
                           inactive-value="0">
                </el-switch>
              </mk-form-item>
            </el-col>
            <el-col :span=24>
              <mk-button :type="4"
                         @click="delSku"
                         v-if="!isAudit&&!obj.psid">删除</mk-button>
            </el-col>
          </el-row>
        </div>

      </mk-card>

    </el-form>
    <div slot="footer">
      <mk-button @click="handleClose">取消</mk-button>
      <mk-button @click="rejectPd"
                 v-if="isAudit&&!isView"
                 :type="2">{{btnName2}}</mk-button>
      <mk-button @click="onSubmit"
                 v-if="!isView"
                 :type="2">{{btnName}}</mk-button>
    </div>
  </el-dialog>
</template>

<script>
import { MkBase } from 'element-ui'
import formData from './form-data'
import cloneDeep from 'lodash.clonedeep'
import MkUpload from 'sbin/upload'

export default {
  name: 't-product-form',
  mixins: [MkBase],
  components: {
    MkUpload
  },
  props: {
    psid: String,
    isAdd: Boolean,
    title: String,
    btnName: String,
    btnName2: String,
    isAudit: Boolean,
    row: Object,
    isView: Boolean
  },
  async mounted () {
    if (this.isAdd === false) {
      // this.form = cloneDeep(this.row)
      let viewDate = await this.$post('/tProduct/getProduct.json', {pdid: this.row.pdid})
      viewDate.pddetail = JSON.parse(viewDate.pddetail)
      this.form = cloneDeep(viewDate)
    }
    await this.xuanzepinpai()
    await this.loadConfgArray()
    this.ui.busying = false
  },
  data () {
    const form = formData()
    return {
      ui: {
        formLabelWidth: '100px',
        busying: true,
        loadingText: '正在加载'
      },
      form,
      brList: [],
      pdUnitList: []
    }
  },
  methods: {
    async valid () {
      if (!this.validate) {
        let fn = this.$refs.form.validate
        let nodejs = false
        this.validate = this.$promise({ fn, nodejs })
      }
      return await this.validate()
    },
    async loadConfgArray () {
      let data = await this.$get(
        'cpConfig/getValue.json', {'id': 'PDUNIT'}
      )
      if (data) {
        this.pdUnitList = data.result.split(',')
      }
    },
    async xuanzepinpai () {
      const res = await this.$get('query.json', {
        sqlCode: 'zBrand.select_list'
      })
      this.brList = res.list
    },
    async onSubmit () {
      if (this.isAudit) {
        let data = await this.$put('/tProduct/auditPd.json', {
          pdid: this.form.pdid
        })
        if (data) {
          this.$emit('close', true)
        }
      } else {
        if (await this.valid()) {
          this.ui.loadingText = '正在保存'
          this.ui.busying = true
          try {
            let data = await this[this.isAdd === false ? '$put' : '$post'](
              `/tProduct/${
                this.isAdd === false ? 'update' : 'add'
              }.json`,
              {
                tProduct: this.form,
                skuList: JSON.stringify(this.form.skuList)
              }
            )
            if (data) {
              this.$emit('close', true)
            }
          } finally {
            this.ui.busying = false
          }
        }
      }
    },
    handleClose () {
      this.$emit('close')
    },
    addSku () {
      this.form.skuList.push({
        psname: '',
        psprice: '',
        isshow: '1'
      })
    },
    delSku () {
      if (this.form.skuList.length > 1) {
        this.form.skuList.pop()
      }
    },
    async rejectPd () {
      let data = await this.$put('/tProduct/rejectPd.json', {
        pdid: this.form.pdid
      })
      if (data) {
        this.$emit('close', true)
      }
    }
  }
}
</script>
